.common-white-box {
	width: 80%;
	display: flex;
	flex-direction: column;
	margin: 100px auto 0;

	.title {
		font-size: 44px;
		text-align: center;
		font-family: OSLight, serif;
		text-transform: uppercase;

		span {
			font-family: OSBold, serif;
		}
	}

	.line {
		width: 100px;
		height: 5px;
		background-color: var(--background-orange);
		margin: 0 auto;
	}

	.small-line {
		width: 68px;
		height: 5px;
		background-color: var(--background-orange);
		margin: 10px auto 42px;
	}

	.content {
		text-align: center;
		font-size: 16px;
		line-height: 24px;
		color: var(--content-font-color);
	}
}

.common-black-box {
	background: var(--background-black);
	overflow: hidden;
	padding-bottom: 175px;

	& > h3 {
		text-transform: uppercase;
		font-family: OSLight, serif;
		color: #fff;
		text-align: center;
		margin-top: 100px;
		font-size: 44px;

		span {
			font-family: OSBold, serif;
		}
	}

	.line {
		width: 100px;
		height: 5px;
		background: #fcac45;
		margin: 0 auto;
	}

	.small-line {
		width: 68px;
		height: 5px;
		background-color: #fcac45;
		margin: 10px auto 94px;
	}
}

#banner {
	background: #111111;
	text-align: center;
	overflow: hidden;

	h3 {
		text-transform: uppercase;
		font-size: 33px;
		color: #999;
		font-family: OSLight, serif;
		margin-top: 10vw;

		& > span {
			color: #fcac45;
			font-family: OSBold, serif;
		}
	}

	h4 {
		color: #999;

		& > span {
			color: #c3c3c3;
		}
	}

	.arrow {
		margin-top: 15vw;
		margin-bottom: 6vw;
	}
}

#about {
	overflow: hidden;

	.about-box {
		width: 80%;
		display: flex;
		margin: 100px auto 0;

		& > .left {
			width: 60%;
		}

		& > .right {
			width: 40%;

			.small-title {
				color: #636363;
			}

			.title {
				font-size: 24px;
				text-transform: uppercase;

				span {
					font-family: OSBold, serif;
				}
			}

			.line {
				width: 75px;
				height: 5px;
				margin-top: 5px;
				margin-bottom: 32px;
				background: #fcac45;
			}

			& > .content {
				width: 80%;
				margin-bottom: 38px;
			}

			.list > .item {
				display: flex;
				align-items: center;
				margin-bottom: 3px;

				& > img {
					width: 14px;
					height: 14px;
				}

				& > .content {
					margin-left: 10px;
					font-family: OSLtalic, serif;

					& > span {
						font-family: OSBold, serif;
						color: #5a5a5a;
					}
				}
			}

			.btn {
				width: 194px;
				padding: 17px 0;
				border: 1px solid #ccc;
				text-transform: uppercase;
				margin-top: 50px;
				font-size: 12px;
			}
		}
	}
}

#team {
	.common-black-box();
	.team-swiper {
		width: 80%;
		margin: 0 auto;
		overflow: unset;
		overflow-x: clip;

		.list {
			display: flex;

			.item {
				text-align: center;

				& > img {
					width: 130px;
					height: 130px;
					border-radius: 50%;
				}

				.name {
					margin-top: 22px;
					color: #fff;

					p:first-child {
						font-size: 20px;
					}

					p:last-child {
						font-size: 16px;
						margin-top: 5px;
						font-family: OSLight, serif;
					}
				}

				.content {
					color: #fff;
					margin-top: 28px;
				}
			}
		}

		.swiper-pagination {
			bottom: -5vw;

			.swiper-pagination-bullet {
				border-radius: unset;
				background-color: white;
				opacity: 1;
			}

			.swiper-pagination-bullet-active {
				background-color: #fcac45;
				opacity: 1;

			}
		}
	}
}

#services {
	background-color: white;
	overflow: hidden;
	padding-bottom: 100px;

	.services-box {
		.common-white-box();

		.list {
			margin-top: 140px;
			display: flex;
			flex-wrap: wrap;

			.features {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;

				h2 {
					font-family: OSBold, serif;
					font-size: 25px;
					text-transform: uppercase;
					margin: 15px auto 10px;
				}

				p {
					width: 80%;
					text-align: center;
					font-size: 14px;
					line-height: 21px;
				}
			}
		}
	}

}

#clients {
	background: var(--background-black);
	overflow: hidden;
	padding-bottom: 10vw;

	.clients-box {
		.common-black-box();
		padding-bottom: 7vw;

		.team-swiper {
			width: 80%;
			margin: 0 auto;
			overflow: unset;
			overflow-x: clip;

			.list {
				display: flex;
				justify-content: space-between;

				.item {
					text-align: center;
				}
			}

			.swiper-pagination {
				bottom: -7vw;

				.swiper-pagination-bullet {
					border-radius: unset;
					background-color: white;
					opacity: 1;
				}

				.swiper-pagination-bullet-active {
					background-color: var(--background-orange);
					opacity: 1;

				}
			}
		}

	}


}

#work {
	background-color: white;
	overflow: hidden;
	padding-bottom: 100px;

	.work-box {
		.common-white-box();

		.pic-box {
			margin-top: 110px;
			display: flex;
			flex-direction: column;

			& > .type-nav {
				display: flex;
				font-size: 18px;
				line-height: 24px;
				justify-content: space-between;

				.type-title {
					font-family: OSBold, serif;
				}

				.type-list {
					display: flex;
					column-gap: 10px;

					a {
						color: var(--content-font-color);
					}

					.active {
						color: unset;
						font-family: OSBold, serif;
					}
				}

				.type-mobile {
					display: none;
				}

				.dropdown-menu {
					left: unset;
					right: 0;
				}
			}

			.list {
				margin-top: 50px;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				row-gap: 2vw;

				.pic {
					width: 23%;
					height: auto;
					display: flex;
					background-color: var(--background-black);
					position: relative;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
					}

					.content {
						position: absolute;
						left: 50%;
						bottom: -100%;
						transform: translateX(-50%);
						transition: .3s linear;
						background-color: var(--background-black);
						width: 100%;
						height: 100%;
						margin: auto;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						& > h2 {
							font-size: 20px;
							font-family: OSBold, serif;
						}

						& > p {
							font-size: 14px;
							line-height: 24px;
						}

						& > img {
							width: 40px;
							height: 40px;
							margin: 2vw auto 0;
						}
					}

					&:hover {
						.content {
							bottom: 50%;
							transform: translate(-50%,50%);
						}
					}
				}
			}
		}
	}
}

#testimonials {
	background: var(--background-black);
	overflow: hidden;

	.testimonials-box {
		.common-black-box();

		.team-swiper {
			width: 80%;
			margin: 0 auto;
			overflow: unset;
			overflow-x: clip;

			.list {
				display: flex;
				justify-content: space-between;

				.item {
					text-align: center;
					font-size: 18px;

					.content {
						color: #e7e7e7;
					}

					p {
						margin-top: 48px;
						color: #b2b2b2;

						span {
							font-family: OSLight, serif;
						}
					}
				}
			}

			.swiper-pagination {
				bottom: -5vw;

				.swiper-pagination-bullet {
					border-radius: unset;
					background-color: white;
					opacity: 1;
				}

				.swiper-pagination-bullet-active {
					background-color: var(--background-orange);
					opacity: 1;

				}
			}
		}
	}
}

#contact {
	background-color: white;
	overflow: hidden;
	padding-bottom: 100px;

	.contact-box {
		.common-white-box();
		width: 60%;

		.contact-input {
			margin-top: 100px;
			display: flex;
			flex-direction: column;

			& > .top {
				display: flex;
				justify-content: space-between;

				.name-box, .email-box {
					width: 48%;
				}
			}

			& > .bottom {
				margin-top: 30px;

				textarea {
					height: 165px;
				}
			}

			& > .button {
				margin-top: 30px;
				display: flex;
				flex-direction: row-reverse;

				button {
					border: 0;
					color: white;
					font-size: 16px;
					width: 165px;
					height: 40px;
					text-transform: uppercase;
					background-color: var(--background-orange);
				}
			}

			label {
				font-weight: unset;

				span {
					color: red;
				}
			}

			.input-group {
				width: 100%;
			}

			.form-control {
				height: 40px;
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.common-white-box-mobile {
		margin-top: 10vw;
		padding-bottom: 5vw;

		.title {
			font-size: 35px;
		}

		.small-line {
			margin: 10px auto 42px;
		}
	}

	#about {
		.about-box {
			flex-wrap: wrap;

			& > .left {
				width: unset;
			}

			& > .right {
				width: unset;

				.content {
					width: unset;
				}

				.btn {
					display: block;
					margin: 50px auto 30px;
				}
			}
		}
	}

	#team {
		padding-bottom: 30vw;

		& > h3 {
			margin-top: 50px;
		}

		.small-line {
			margin: 10px auto 42px;
		}

		& > .team-swiper {
			.list {
				flex-wrap: wrap;

				.item {
					width: 50%;
					margin-bottom: 20px;
				}
			}
		}

		.team-swiper {
			.swiper-pagination {
				bottom: -20vw;
			}
		}

	}

	#services {
		.services-box {
			margin-top: 50px;

			.title {
				font-size: 35px;
			}

			.list {
				margin-top: 50px;
				row-gap: 20px;

				.features {
					width: unset;
				}
			}
		}
	}

	#clients {
		.clients-box {
			padding-bottom: 30vw;

			h3 {
				font-size: 35px;
				margin-top: 50px;
			}

			.small-line {
				margin: 10px auto 42px;
			}

			& > .team-swiper {
				.list {
					flex-wrap: wrap;
					row-gap: 20px;

					.item {
						width: 100%;
					}
				}
			}

			.team-swiper {
				.swiper-pagination {
					bottom: -20vw;
				}
			}
		}
	}

	#work {
		.work-box {
			.common-white-box-mobile();

			.small-line {
				margin: 10px auto 42px;
			}

			.pic-box {
				& > .type-nav {
					& > .type-mobile {
						display: block;
					}
				}

				margin-top: 10vw;

				& > .type-nav {
					.type-list {
						display: none;
					}
				}

				.list {
					margin-top: 5vw;

					.pic {
						width: 49%;

						.content {
							h2 {
								font-size: 15px;
							}
						}
					}
				}
			}
		}
	}

	#testimonials {
		.testimonials-box {
			padding-bottom: 30vw;

			h3 {
				font-size: 35px;
				margin-top: 50px;
			}

			.small-line {
				margin: 10px auto 42px;
			}

			.team-swiper {
				.swiper-pagination {
					bottom: -15vw;
				}
			}
		}
	}

	#contact {
		.contact-box {
			.common-white-box-mobile();

			.contact-input {
				margin-top: 10vw;

				& > .top {
					flex-wrap: wrap;
					row-gap: 3vw;

					.name-box, .email-box {
						width: 100%;
					}
				}

				& > .bottom {
					margin-top: 3vw;
				}

				& > button {
					margin-top: 3vw;
				}
			}
		}
	}
}

